diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Page2.html b/Page2.html new file mode 100644 index 0000000..efec2a0 --- /dev/null +++ b/Page2.html @@ -0,0 +1,43 @@ + + + + + + Quote + + + + + + + +
+ +
+
+ + + + +
+

The greater our knowledge increases the more our ignorance unfolds.

+
+

John Fitzgerald Kennedy

+ +
+ + + + + + + \ No newline at end of file diff --git a/Page3.html b/Page3.html new file mode 100644 index 0000000..1513fa2 --- /dev/null +++ b/Page3.html @@ -0,0 +1,31 @@ + + + + + + Information + + + +
+ +
+ +
+ + + +
+ + + + \ No newline at end of file diff --git a/README.md b/README.md index 7ed589e..b3eabe0 100644 --- a/README.md +++ b/README.md @@ -1,107 +1,13 @@ # AD - SBA - HTML/CSS/JavaScript - +### Link +https://mondira-roy2020.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}` - - - - - +Created a 4 page website with US President's quotes and their displayed pictures. Contact/Feedback form is also created for user input and experience. -## How to Submit +Used HTML, CSS and javascript with arrays to save the quotes and images and displayed them randomly on click of a button. -#### 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` +There are links to navigate between pages. -#### 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` +The forms can be filled in but there is an error on submission. Have to figure out how to save the form or send it via email. diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..6b98bd1 --- /dev/null +++ b/contact.html @@ -0,0 +1,30 @@ + + + + + + Document + + +
+ + Your name:
+
+
+ + Your email:
+
+
+ + Your comments:
+

+ + + +
+ + + + + + diff --git a/css/style.css b/css/style.css index d17d83a..9174e21 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,53 @@ -body { - background-color: navy; -} +body { + + margin: 0; + font-family: Arial, Helvetica, sans-serif; + } -object { +.president-image { + background-image: url("/img/all_presidents.jpg"); + background-color: #999; height: 100vh; - width: 100vh; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + } + + .president-text { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + } +/* header { + initial-letter-align:center; +} */ + + +h2 { + text-align: center; + color: white ; +} + +ul li { +background-color: #777; +color: white; +align-items: flex-start; +margin: 5px; +float: none; +padding:10px; +display:inline-block; +list-style-type: none; +list-style-position: inside; +} +a { + color:rgb(19, 18, 18); } +a:hover{ + color:rgb(129, 53, 223); + font-weight: 200; +} \ No newline at end of file diff --git a/css/style2.css b/css/style2.css new file mode 100644 index 0000000..9441066 --- /dev/null +++ b/css/style2.css @@ -0,0 +1,73 @@ +body { + background: url('/img/background.jpg') center/cover no-repeat; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + } + h1 { + font-weight: 400; + } + nav ul{ + margin:0; + display:inline; + padding:0 0 0 30px; + + } + + nav ul li { + list-style-type: none; + display:inline-block; + background:black; + color: white; + padding: 10px 10px; + margin:10; + + } + + nav ul li a { + color: white; + } + +.container{ + min-height: 100vh; + min-width: 50vh; + text-align: center; + align-items:center; + justify-content: center; + padding:2 rem; + margin-top:0; + border-radius: 5px; + flex:10 0 80%; +} +.quoteBtn { + border:black solid 2px; + color:#333; + float:clear; + background-color: rgb(122, 125, 129); + font-size: 1.3rem; + padding:0.25 rem 0.5 rem; + border-radius: 7px; + position: absolute; + top:45%; + left:50%; + cursor: pointer; + clear:both; +} +.quoteBtn:hover{ + color: rgb(54, 14, 21); +} +blockquote{ + background-color: rgb(233, 249, 250); + border: 5px solid rgb(40, 134, 138); + margin:1.5 rem; + padding: 0.5 rem; +} +.quoteAuthor{ + size: 1.5 rem; + background-color: rgb(233, 249, 250); + border: 1px solid rgb(40, 134, 138); + position:absolute; + left:50%; + margin:1.5 rem; + padding: 0.5 rem; + +} \ No newline at end of file diff --git a/css/style3.css b/css/style3.css new file mode 100644 index 0000000..9ede260 --- /dev/null +++ b/css/style3.css @@ -0,0 +1,81 @@ +body { + + display: flex; + align-items: center; + justify-content: center; + background: url('/img/background1.jpg') center/cover no-repeat; +} + +header { + background: #999; + color:white; + margin:0; + padding : 15px 0; + display:inline; + position: absolute; + top: 80%; + left:36%; +} + +nav ul{ + margin:10; + display:inline; + padding:30px; + +} + +nav ul li { + list-style-type: none; + display:inline-block; + object-position: top; + background:black; + color: white; + padding: 10px 10px; + margin:5px; + +} + +nav ul li a { + color: white; +} + +.images { + background:#999; + flex: 0 0 50%; + min-height: 70vh; + background: url('/img/rushmore.jpg') center/contain no-repeat; + border-radius: 15px; + /* box-shadow:5px 10px darkgray; */ + position: relative; + +} + +.btn { + display: inline-block; + background: white; + color:black; + border:3px solid blue; + font-size: 1.5rem; + padding:0.5rem; + border-radius: 20%; + box-shadow: 2px 5px black; + outline: none; + +} + +.prevBtn { + position:absolute; + top:50%; + left:0; + transform:translate(-50%, -50%); +} + +.nextBtn { + position:absolute; + top:50%; + right:0; + transform:translate(50%, -50%); +} +footer { + clear:both; +} \ No newline at end of file diff --git a/img/JFK-leadership-and-learning-get-lighthouse-blog.png b/img/JFK-leadership-and-learning-get-lighthouse-blog.png new file mode 100644 index 0000000..64a3418 Binary files /dev/null and b/img/JFK-leadership-and-learning-get-lighthouse-blog.png differ diff --git a/img/Roosevelt.png b/img/Roosevelt.png new file mode 100644 index 0000000..a87dd8e Binary files /dev/null and b/img/Roosevelt.png differ diff --git a/img/adams.jpg b/img/adams.jpg new file mode 100644 index 0000000..9924308 Binary files /dev/null and b/img/adams.jpg differ diff --git a/img/all_presidents.jpg b/img/all_presidents.jpg new file mode 100644 index 0000000..adc83d9 Binary files /dev/null and b/img/all_presidents.jpg differ diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 0000000..8a30e7d Binary files /dev/null and b/img/background.jpg differ diff --git a/img/background1.jpg b/img/background1.jpg new file mode 100644 index 0000000..a4c8821 Binary files /dev/null and b/img/background1.jpg differ diff --git a/img/jefferson.jpg b/img/jefferson.jpg new file mode 100644 index 0000000..64e7297 Binary files /dev/null and b/img/jefferson.jpg differ diff --git a/img/lincoln.jpg b/img/lincoln.jpg new file mode 100644 index 0000000..d34515b Binary files /dev/null and b/img/lincoln.jpg differ diff --git a/img/obama.jpg b/img/obama.jpg new file mode 100644 index 0000000..5835103 Binary files /dev/null and b/img/obama.jpg differ diff --git a/img/platonic-icosahedron.gif b/img/platonic-icosahedron.gif deleted file mode 100644 index 10e55a9..0000000 Binary files a/img/platonic-icosahedron.gif and /dev/null differ diff --git a/img/platonic-octahedron.gif b/img/platonic-octahedron.gif deleted file mode 100644 index fa934ec..0000000 Binary files a/img/platonic-octahedron.gif and /dev/null differ diff --git a/img/platonic-pyramid.gif b/img/platonic-pyramid.gif deleted file mode 100644 index ca1d412..0000000 Binary files a/img/platonic-pyramid.gif and /dev/null differ diff --git a/img/president-0.jpg b/img/president-0.jpg new file mode 100644 index 0000000..4e66b8d Binary files /dev/null and b/img/president-0.jpg differ diff --git a/img/president-1.jpg b/img/president-1.jpg new file mode 100644 index 0000000..b8d3e9a Binary files /dev/null and b/img/president-1.jpg differ diff --git a/img/president-10.jpg b/img/president-10.jpg new file mode 100644 index 0000000..c9dba66 Binary files /dev/null and b/img/president-10.jpg differ diff --git a/img/president-2.jpg b/img/president-2.jpg new file mode 100644 index 0000000..75ba3bc Binary files /dev/null and b/img/president-2.jpg differ diff --git a/img/president-3.jpg b/img/president-3.jpg new file mode 100644 index 0000000..ee444f4 Binary files /dev/null and b/img/president-3.jpg differ diff --git a/img/president-4.jpg b/img/president-4.jpg new file mode 100644 index 0000000..ff0e9ff Binary files /dev/null and b/img/president-4.jpg differ diff --git a/img/president-5.jpg b/img/president-5.jpg new file mode 100644 index 0000000..48fcda8 Binary files /dev/null and b/img/president-5.jpg differ diff --git a/img/president-6.jpg b/img/president-6.jpg new file mode 100644 index 0000000..3b19704 Binary files /dev/null and b/img/president-6.jpg differ diff --git a/img/president-7.jpg b/img/president-7.jpg new file mode 100644 index 0000000..7f00739 Binary files /dev/null and b/img/president-7.jpg differ diff --git a/img/president-8.jpg b/img/president-8.jpg new file mode 100644 index 0000000..dbf9b1f Binary files /dev/null and b/img/president-8.jpg differ diff --git a/img/president-9.jpg b/img/president-9.jpg new file mode 100644 index 0000000..946a99c Binary files /dev/null and b/img/president-9.jpg differ diff --git a/img/presidents-of-the-United-States.jpg b/img/presidents-of-the-United-States.jpg new file mode 100644 index 0000000..775abb0 Binary files /dev/null and b/img/presidents-of-the-United-States.jpg differ diff --git a/img/reagan.jpg b/img/reagan.jpg new file mode 100644 index 0000000..1e6043a Binary files /dev/null and b/img/reagan.jpg differ diff --git a/img/rushmore.jpg b/img/rushmore.jpg new file mode 100644 index 0000000..f7fa720 Binary files /dev/null and b/img/rushmore.jpg differ diff --git a/index.html b/index.html index 4dc0c72..7d319f7 100644 --- a/index.html +++ b/index.html @@ -9,33 +9,39 @@ - + My Website - - + - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. +
+

Quotes by famous Presidents

+
+ +
+
+

All the President's men

+

And their famous quotes

+ + +
+
+ + + + + + @@ -44,7 +50,7 @@ diff --git a/js/contactForm.js b/js/contactForm.js new file mode 100644 index 0000000..8ecc1a6 --- /dev/null +++ b/js/contactForm.js @@ -0,0 +1,119 @@ +jQuery(document).ready(function($) { + "use strict"; + + //Contact + $('form.contactForm').submit(function() { + var f = $(this).find('.form-group'), + ferror = false, + emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i; + + f.children('input').each(function() { // run all inputs + + var i = $(this); // current input + var rule = i.attr('data-rule'); + + if (rule !== undefined) { + var ierror = false; // error flag for current input + var pos = rule.indexOf(':', 0); + if (pos >= 0) { + var exp = rule.substr(pos + 1, rule.length); + rule = rule.substr(0, pos); + } else { + rule = rule.substr(pos + 1, rule.length); + } + + switch (rule) { + case 'required': + if (i.val() === '') { + ferror = ierror = true; + } + break; + + case 'minlen': + if (i.val().length < parseInt(exp)) { + ferror = ierror = true; + } + break; + + case 'email': + if (!emailExp.test(i.val())) { + ferror = ierror = true; + } + break; + + case 'checked': + if (! i.is(':checked')) { + ferror = ierror = true; + } + break; + + case 'regexp': + exp = new RegExp(exp); + if (!exp.test(i.val())) { + ferror = ierror = true; + } + break; + } + i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind'); + } + }); + f.children('textarea').each(function() { // run all inputs + + var i = $(this); // current input + var rule = i.attr('data-rule'); + + if (rule !== undefined) { + var ierror = false; // error flag for current input + var pos = rule.indexOf(':', 0); + if (pos >= 0) { + var exp = rule.substr(pos + 1, rule.length); + rule = rule.substr(0, pos); + } else { + rule = rule.substr(pos + 1, rule.length); + } + + switch (rule) { + case 'required': + if (i.val() === '') { + ferror = ierror = true; + } + break; + + case 'minlen': + if (i.val().length < parseInt(exp)) { + ferror = ierror = true; + } + break; + } + i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind'); + } + }); + if (ferror) return false; + else var str = $(this).serialize(); + var action = $(this).attr('action'); + if( ! action ) { + action = 'contactform/contactform.php'; + } + $.ajax({ + type: "POST", + url: action, + data: str, + success: function(msg) { + // alert(msg); + if (msg == 'OK') { + $("#sendmessage").addClass("show"); + $("#errormessage").removeClass("show"); + $('.contactForm').find("input, textarea").val(""); + } else { + $("#sendmessage").removeClass("show"); + $("#errormessage").addClass("show"); + $('#errormessage').html(msg); + } + + } + }); + return false; + }); + + }); + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..e69de29 diff --git a/js/script2.js b/js/script2.js new file mode 100644 index 0000000..a9679be --- /dev/null +++ b/js/script2.js @@ -0,0 +1,36 @@ +const quotes = [ + { + name:'John F Kennedy', + quote:'Those who dare to fail miserably can achieve greatly.' + },{ + name:'Abraham Lincoln', + quote:'I am a success today because I had a friend who believed in me and I did not have the heart to let him down. ' + },{ + name:'John Quincy Adams', + quote:'If your actions inspire others to dream more, learn more, do more and become more, you are a leader.' + },{ + name:'Barrack H Obama', + quote:'We did not come to fear the future. We came here to shape it.' + },{ + name:'Donald J Trump', + quote:'Sometimes your best investments are the ones you donot make.' + },{ + name:'Ronald Reagan', + quote:'The future does not belong to the fainthearted;it belongs to the Brave.' + },{ + name:'Bill Clinton', + quote:'If you live long enough, you will make mistakes.But if you learn from them, you will be a better person.' + } + +] +const quoteBtn = document.querySelector('.quoteBtn'); +const quoteAuthor = document.querySelector('.quoteAuthor'); +const quote = document.querySelector('.quote'); + +quoteBtn.addEventListener('click', displayQuote); + +function displayQuote(){ + let number = Math.floor(Math.random()*quotes.length); + quote.innerHTML= quotes[number].quote; + quoteAuthor.innerHTML= quotes[number].name; +} \ No newline at end of file diff --git a/js/script3.js b/js/script3.js new file mode 100644 index 0000000..fbcd609 --- /dev/null +++ b/js/script3.js @@ -0,0 +1,26 @@ +const nextBtn=document.querySelector('.nextBtn'); +const prevBtn=document.querySelector('.prevBtn'); +const container=document.querySelector('.images'); + +let counter=0; + +nextBtn.addEventListener('click',nextPic); + +prevBtn.addEventListener('click',prevPic); + +function nextPic() { + + if (counter === 10){ + counter= -1; + } + counter++; + container.style.backgroundImage = `url(/img/president-${counter}.jpg)` +} + +function prevPic(){ + if (counter === 0){ + counter= 10; + } + counter--; + container.style.backgroundImage = `url(/img/president-${counter}.jpg)` +} \ No newline at end of file