diff --git a/README.md b/README.md index 7ed589e..b0afecb 100644 --- a/README.md +++ b/README.md @@ -1,107 +1,9 @@ # AD - SBA - HTML/CSS/JavaScript - +* Access my site navigating to the following link https://anjalig927.github.io/sba.javascript_3-page-website/ ### Description -* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly. - -* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor. - -* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements. - -* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system. - - -* Some resources for free content: - * Photos: `https://www.pexels.com/search/template/` - * Text: `https://www.lipsum.com/` - * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k` - -* Useful API sites: - * https://rapidapi.com/ (Links to an external site.) - * https://any-api.com/ (Links to an external site.) - * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.) - * https://apilist.fun/ - -### Deliverable: -* A theme for your site that you feel comfortable with - * Complete all technical requirements for HTML, CSS, and Javascript - * Have markups of your pages - * Research for a public API that can provide you with content (Optional) - * Include a README file. The file should include technical specifications and description of your website. - * Host on GitHub, include the link to your GitHub account in the README file(optional) - * Submit the project in a ZIP file - - - - -## Technical requirements - -* HTML - * Have at least 3 pages, keep the grid system consistent as much as possible - * Use at least 10 different HTML tags - * Use HTML tables - * Implement at least two uses for forms - * Dropped Down Menu - * Use web fonts - * Use different types of content in the form of text, images, videos, and GIFs - * Use regex validation - -* CSS - * Inline, internal, and external styling - * Use five different CSS selectors - * Don’t use too many fonts - * Use colors that complement each other - * Use Flexbox (Optional) - * Use SASS/SCSS (Optional) - * Use animations (Optional) - -* Javascript - * External scripts - * Use variables, if statements, loops, at least one form of collections, functions/call back, and events - * Use AJAX (Optional) - * Use JSON or XML (Optional) - * Use JQuery (Optional) - - - -## How to Download - -#### Part 1 - Forking the Project -* To _fork_ the project, click the `Fork` button located at the top right of the project. - - -#### Part 2 - Navigating to _forked_ Repository -* Navigate to your github profile to find the _newly forked repository_. -* Copy the URL of the project to the clipboard. - -#### Part 3 - Cloning _forked_ repository -* Clone the repository from **your account** into the `~/dev` directory. - * if you do not have a `~/dev` directory, make one by executing the following command: - * * `mkdir ~/dev` - * navigate to the `~/dev` directory by executing the following command: - * * `cd ~/dev` - * clone the project by executing the following command: - * * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}` - - - - - - -## How to Submit +* This application is a 3 page website for food lovers which allow users to view healthy and exciting recipes and also create their own recipe. +* This application is developed in HTML,CSS,Bootstrap and the scripting language is Javascript. -#### Part 1 - _Pushing_ local changes to remote repository -* from a _terminal_ navigate to the root directory of the _cloned_ project. -* from the root directory of the project, execute the following commands: - * * add all changes - * * `git add .` - * * commit changes to be pushed - * * `git commit -m 'I have added changes'` - * * push changes to your repository - * * `git push -u origin master` -#### Part 2 - Submitting assignment -* from the browser, navigate to the _forked_ project from **your** github account. -* click the `Pull Requests` tab. -* select `New Pull Request` diff --git a/cake.html b/cake.html new file mode 100644 index 0000000..4922df1 --- /dev/null +++ b/cake.html @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + YumTum + + + + + + + + + + + + + + + + + + + + + + + + +
+

Chocolate Cake

+ +
+
chocolate cake +

This is a rich and moist chocolate cake. It only takes a few minutes to prepare the batter. Frost + with your favorite chocolate frosting. + Donec risus dui, scelerisque sit amet accumsan auctor, porta vel magna. Donec tempus dictum magna. + Maecenas sed mollis sapien. In volutpat urna felis, et eleifend nunc lacinia ut. + + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec + pretium risus ipsum, vel blandit mi blandit at. Nam sodales semper eros, vel posuere sapien + malesuada + id. Nullam convallis sem in elit vulputate luctus. Aenean dui lacus, fermentum sit amet tempor non, + sodales ullamcorper dolor. Duis faucibus lorem urna, non venenatis nisi molestie nec. Suspendisse + euismod cursus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis leo + non + consequat imperdiet. +

+
+
+ +
+ +
+

Ingredients

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Ingredientsmeasure
1All purpose Flour1 cup
2vanila essence1 tbsp
4eggs3
5butter, melted¼ cup
6white sugar 3 tbsp
+
+
+ +
+ + +

+

Directions:

+ In a medium bowl, mix together cookie crumbs, 3 tablespoons sugar, and melted butter. Press mixture + into the + bottom of a 9 inch springform pan. + + + In a saucepan, combine raspberries, 2 tablespoons sugar, cornstarch, and water. Bring to boil, and + continue + boiling 5 minutes, or until sauce is thick. Strain sauce through a mesh strainer to remove seeds. + + + Preheat oven to 325 degrees F (165 degrees C). In a metal bowl over a pan of simmering water, melt white + chocolate chips with half-and-half, stirring occasionally until smooth. + + + In a large bowl, mix together cream cheese and 1/2 cup sugar until smooth. Beat in eggs one at a time. + Blend + in vanilla and melted white chocolate. Pour half of batter over crust. Spoon 3 tablespoons raspberry + sauce + over batter. Pour remaining cheesecake batter into pan, and again spoon 3 tablespoons raspberry sauce + over + the top. Swirl batter with the tip of a knife to create a marbled effect. + + + Bake for 55 to 60 minutes, or until filling is set. Cool, cover with plastic wrap, and refrigerate for 8 + hours before removing from pan. Serve with remaining raspberry sauce. +

+
+ + + + +
+ + + + + + \ No newline at end of file diff --git a/createRecipe.html b/createRecipe.html new file mode 100644 index 0000000..b8c8cc8 --- /dev/null +++ b/createRecipe.html @@ -0,0 +1,191 @@ + + + + + + + + + + + + + + YumTum + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + +
+
+
+ + + +
+
+

+ +

+ +
+ +

+ +

+ +

+ +
+
+
+
+
+

Chocolate Cake

+ +
+
+

+ Donec risus dui, scelerisque sit amet accumsan auctor, porta vel magna. Donec tempus dictum magna. + Maecenas sed mollis sapien. In volutpat urna felis, et eleifend nunc lacinia ut. + + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec + pretium risus ipsum, vel blandit mi blandit at. Nam sodales semper eros, vel posuere sapien + malesuada + id. Nullam convallis sem in elit vulputate luctus. Aenean dui lacus, fermentum sit amet tempor non, + sodales ullamcorper dolor. Duis faucibus lorem urna, non venenatis nisi molestie nec. Suspendisse + euismod cursus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis leo + non + consequat imperdiet. +

+
+
+ +
+ +
+

Ingredients

+ +
+
+ +
+ + +

+

Directions:

+ In a medium bowl, mix together cookie crumbs, 3 tablespoons sugar, and melted butter. Press mixture + into the + bottom of a 9 inch springform pan. + + + In a saucepan, combine raspberries, 2 tablespoons sugar, cornstarch, and water. Bring to boil, and + continue + boiling 5 minutes, or until sauce is thick. Strain sauce through a mesh strainer to remove seeds. + + + Preheat oven to 325 degrees F (165 degrees C). In a metal bowl over a pan of simmering water, melt white + chocolate chips with half-and-half, stirring occasionally until smooth. + + + In a large bowl, mix together cream cheese and 1/2 cup sugar until smooth. Beat in eggs one at a time. + Blend + in vanilla and melted white chocolate. Pour half of batter over crust. Spoon 3 tablespoons raspberry + sauce + over batter. Pour remaining cheesecake batter into pan, and again spoon 3 tablespoons raspberry sauce + over + the top. Swirl batter with the tip of a knife to create a marbled effect. + + + Bake for 55 to 60 minutes, or until filling is set. Cool, cover with plastic wrap, and refrigerate for 8 + hours before removing from pan. Serve with remaining raspberry sauce. +

+
+ + + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..8e8a671 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,91 @@ + + body { - background-color: navy; + background-color:white; } +.recipe{ + background-color:rgb(241, 214, 124); +} object { height: 100vh; width: 100vh; } + +.container{ + display: flex; + flex-direction: column; +} + #brand-font{ + font-family: 'Pacifico', cursive; + color: rgb(146, 1, 1); +} + +div p{ + margin-top: 50px; +margin-right:50px ; +margin-bottom: 50px; +} +div img{ + height:350px; + width:350px; + margin-left:20px ; + margin-right:20px ; + margin-bottom: 20px; +} + +.page-image{ + display: block; + margin-top: 30px; + margin-left: auto; + margin-right: auto; + height: 500px; + width:70%; + +} + +.display-3{ + font-family: 'Pacifico', cursive; + font-weight: bolder; + color: rgb(146, 1, 1); + text-align: center; +} + +.display-5{ + font-weight: normal; + color: rgb(146, 1, 1); + text-align: center; + margin-top: 20px; +} + +#name{ + font-family: 'Pacifico'; + font-size: x-large; + left: 50px; + color:orangered; +} + +.info{ + display: block; + margin-left: 20px; +} +#ingredients{ + display: block; +} +.table{ + width: 500px; + height: auto; + + margin-left: 20px; + margin-top: 20px;; +} + +.table-bordered{ + border-color:black; +} + +.table1 { width: 70%; } +.table1, th, td { border: solid 1px black; + border-collapse: collapse; padding: 2px 3px; text-align: center; +} \ No newline at end of file diff --git a/img/color-cook-cooking-delicious-259763.jpg b/img/color-cook-cooking-delicious-259763.jpg new file mode 100644 index 0000000..9036af4 Binary files /dev/null and b/img/color-cook-cooking-delicious-259763.jpg differ diff --git a/img/photo-of-chocolate-cake-2144200.jpg b/img/photo-of-chocolate-cake-2144200.jpg new file mode 100644 index 0000000..b203223 Binary files /dev/null and b/img/photo-of-chocolate-cake-2144200.jpg differ diff --git a/img/woman-pouring-juice-on-glass-3184192.jpg b/img/woman-pouring-juice-on-glass-3184192.jpg new file mode 100644 index 0000000..d2e40d2 Binary files /dev/null and b/img/woman-pouring-juice-on-glass-3184192.jpg differ diff --git a/index.html b/index.html index 4dc0c72..aea1fd3 100644 --- a/index.html +++ b/index.html @@ -4,47 +4,89 @@ - + + + - - - - - - - - - - - + YumTum + + + + + + - - - - - - - The quickest of brown foxes. - - + + + + + +
+ +

YumTum

+

+
+ Responsive image +
+
- - diff --git a/js/createRecipe.js b/js/createRecipe.js new file mode 100644 index 0000000..11e61df --- /dev/null +++ b/js/createRecipe.js @@ -0,0 +1,159 @@ + +function hideFunction() { + var hidelement = document.getElementById("hideMyelement"); + if (hidelement.style.display === "none") { + hidelement.style.display = "block"; + } else { + hidelement.style.display = "none"; + } +} + + + + +let recipeName = document.getElementById("formGroupExampleInput").value; +var arrHead = new Array(); // array for header. +arrHead = ['', 'Ingredients', 'Measure']; + + +function loadImageFileAsURL(event) { + + + let selectedFile = event.target.files[0]; + if (selectedFile) { + + let fileReader = new FileReader(); + var imgtag = document.getElementById("myimage"); + imgtag.title = selectedFile.name; + fileReader.onload = function (event) { + imgtag.src = event.target.result; + imgtag.setAttribute("style", "float: left"); + + }; + // console.log(fileReader.readAsDataURL(selectedFile)); + fileReader.readAsDataURL(selectedFile); + } + + +} + + + + + +// first create TABLE structure with the headers. +function createTable() { + hideFunction(); //calling hide function onload event to hide div + + let ingredientTable = document.createElement('table'); + ingredientTable.setAttribute('id', 'ingredientTable'); + ingredientTable.setAttribute('class', 'table1'); // table id. + + let tr = ingredientTable.insertRow(-1); + for (let h = 0; h < arrHead.length; h++) { + let th = document.createElement('th'); // create table headers + th.innerHTML = arrHead[h]; + tr.appendChild(th); + } + + let div = document.getElementById('cont'); + + div.appendChild(ingredientTable); // add the TABLE to the container. + +} +function addTextBox() { + + let addTab = document.getElementById('ingredientTable'); + + let rowCnt = addTab.rows.length; // table row count. + let tr = addTab.insertRow(rowCnt); // the table row. + tr = addTab.insertRow(rowCnt); + + for (let coln = 0; coln < arrHead.length; coln++) { + let td = document.createElement('td'); // table definition. + td = tr.insertCell(coln); + + if (coln == 0) { // the first column. + // add a button in every new row in the first column. + let button = document.createElement('input'); + + // set input attributes. + button.setAttribute('type', 'button'); + button.setAttribute('value', 'Remove'); + + // add button's 'onclick' event. + button.setAttribute('onclick', 'removeRow(this)'); + + td.appendChild(button); + } + else { + // 2nd, 3rd and 4th column, will have textbox. + let element = document.createElement('input'); + element.setAttribute('type', 'text'); + element.setAttribute('value', ''); + + td.appendChild(element); + } + } +} + + +function removeRow(oButton) { + let addTab = document.getElementById('ingredientTable'); + addTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // button -> td -> tr. +} + +// function to extract and submit table data. +function submitButton() { + hideFunction(); + displayName(); + + let myTab = document.getElementById('ingredientTable'); + var arrValues = new Array(); + + // loop through each row of the table. + for (row = 1; row < myTab.rows.length - 1; row++) { + // loop through each cell in a row. + for (coln = 0; coln < myTab.rows[row].cells.length; coln++) { + let element = myTab.rows.item(row).cells[coln]; + + if (element.childNodes[0].getAttribute('type') == 'text') { + arrValues.push("'" + element.childNodes[0].value + "'"); + + } + } + + displayTable(arrValues); + // The final output. + document.getElementById('output').innerHTML = arrValues; + + } +} +function displayTable(arrValues) { + //Create a HTML Table element. + + // -------------------------------------------------------------- + var arrHead = new Array(); // array for header. + arrHead = ['', 'Ingredients', 'Measure']; + let ingredientTable = document.createElement('table'); + ingredientTable.setAttribute('id', 'createDisplayTable'); + ingredientTable.setAttribute('class', 'table table-bordered'); + + let tr = ingredientTable.insertRow(-1); + for (let h = 0; h < arrHead.length; h++) { + let th = document.createElement('th'); // create table headers + th.innerHTML = arrHead[h]; + tr.appendChild(th); + } + + let div = document.getElementById('ingredients'); + + div.appendChild(ingredientTable); + + +} + +function displayName() { + document.getElementById("displayname").innerHTML = document.getElementById("formGroupExampleInput").value; + +} diff --git a/js/homepage.js b/js/homepage.js new file mode 100644 index 0000000..0cecaa2 --- /dev/null +++ b/js/homepage.js @@ -0,0 +1,9 @@ + +function validateName() { + let name = document.getElementById("username").value; + if (name == "") { + alert("Please enter your name"); + } else { + document.getElementById("name").innerHTML = "Welcome! " + name; + } +} \ No newline at end of file diff --git a/lemonade.html b/lemonade.html new file mode 100644 index 0000000..582fac5 --- /dev/null +++ b/lemonade.html @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + YumTum + + + + + + + + + + + + + + + + + + + + + + + + +
+

Chocolate Cake

+ +
+
chocolate cake +

This is a rich and moist chocolate cake. It only takes a few minutes to prepare the batter. Frost + with your favorite chocolate frosting. + Donec risus dui, scelerisque sit amet accumsan auctor, porta vel magna. Donec tempus dictum magna. + Maecenas sed mollis sapien. In volutpat urna felis, et eleifend nunc lacinia ut. + + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec + pretium risus ipsum, vel blandit mi blandit at. Nam sodales semper eros, vel posuere sapien + malesuada + id. Nullam convallis sem in elit vulputate luctus. Aenean dui lacus, fermentum sit amet tempor non, + sodales ullamcorper dolor. Duis faucibus lorem urna, non venenatis nisi molestie nec. Suspendisse + euismod cursus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis leo + non + consequat imperdiet. +

+
+
+ +
+ +
+

Ingredients

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Ingredientsmeasure
1All purpose Flour1 cup
2vanila essence1 tbsp
4eggs3
5butter, melted¼ cup
6white sugar 3 tbsp
+
+
+ +
+ + +

+

Directions:

+ In a medium bowl, mix together cookie crumbs, 3 tablespoons sugar, and melted butter. Press mixture + into the + bottom of a 9 inch springform pan. + + + In a saucepan, combine raspberries, 2 tablespoons sugar, cornstarch, and water. Bring to boil, and + continue + boiling 5 minutes, or until sauce is thick. Strain sauce through a mesh strainer to remove seeds. + + + Preheat oven to 325 degrees F (165 degrees C). In a metal bowl over a pan of simmering water, melt white + chocolate chips with half-and-half, stirring occasionally until smooth. + + + In a large bowl, mix together cream cheese and 1/2 cup sugar until smooth. Beat in eggs one at a time. + Blend + in vanilla and melted white chocolate. Pour half of batter over crust. Spoon 3 tablespoons raspberry + sauce + over batter. Pour remaining cheesecake batter into pan, and again spoon 3 tablespoons raspberry sauce + over + the top. Swirl batter with the tip of a knife to create a marbled effect. + + + Bake for 55 to 60 minutes, or until filling is set. Cool, cover with plastic wrap, and refrigerate for 8 + hours before removing from pan. Serve with remaining raspberry sauce. +

+
+ + + + + + + + + + + \ No newline at end of file