From dc99657446ef66242743a4e4a82e0f93e11b80b9 Mon Sep 17 00:00:00 2001 From: Jim Macur Date: Tue, 20 Aug 2024 20:11:07 -0600 Subject: [PATCH 1/5] random image, quote, and title --- README.md | 2 +- index.html | 72 +++++++++--------- src/main.js | 208 ++++++++++++++++++++++++++++------------------------ styles.css | 140 +++++++++++++++++------------------ 4 files changed, 219 insertions(+), 203 deletions(-) diff --git a/README.md b/README.md index 6de202be2..715543100 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ To view your project: 1. In your terminal, navigate to your project repo 2. Run the command `open index.html` - + ______________________________________________________ # README Template Before turning this project in, erase this line and everything above it and fill in the info below. diff --git a/index.html b/index.html index ca0707621..24a14cd45 100644 --- a/index.html +++ b/index.html @@ -1,43 +1,43 @@ - - - - - Hang In There + + + + + Hang In There -
-
- nothin' to see here -

Title

-

Quote

-
- - - - -
- - - +
+
+ nothin' to see here +

Title

+

Quote

+
+ + + + +
+ + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index d818a0ab6..78ab1a9c9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,119 +1,135 @@ -// query selector variables go here 👇 +var showRandom = document.querySelector('.show-random'); +var posterImg = document.querySelector('.poster-img'); +var posterTitle = document.querySelector('.poster-title'); +var posterQuote = document.querySelector('.poster-quote'); -// we've provided you with some data to work with 👇 -// tip: you can tuck this data out of view with the dropdown found near the line number where the variable is declared var images = [ - "./assets/bees.jpg", - "./assets/bridge.jpg", - "./assets/butterfly.jpg", - "./assets/cliff.jpg", - "./assets/elephant.jpg", - "./assets/flock.jpg", - "./assets/fox.jpg", - "./assets/frog.jpg", - "./assets/horse.jpg", - "./assets/lion.jpg", - "./assets/mountain.jpg", - "./assets/pier.jpg", - "./assets/puffins.jpg", - "./assets/pug.jpg", - "./assets/runner.jpg", - "./assets/squirrel.jpg", - "./assets/tiger.jpg", - "./assets/turtle.jpg" + "./assets/bees.jpg", + "./assets/bridge.jpg", + "./assets/butterfly.jpg", + "./assets/cliff.jpg", + "./assets/elephant.jpg", + "./assets/flock.jpg", + "./assets/fox.jpg", + "./assets/frog.jpg", + "./assets/horse.jpg", + "./assets/lion.jpg", + "./assets/mountain.jpg", + "./assets/pier.jpg", + "./assets/puffins.jpg", + "./assets/pug.jpg", + "./assets/runner.jpg", + "./assets/squirrel.jpg", + "./assets/tiger.jpg", + "./assets/turtle.jpg" ]; var titles = [ - "determination", - "success", - "inspiration", - "perspiration", - "grit", - "empathy", - "feelings", - "hope", - "believe", - "try", - "conviction", - "accomplishment", - "achievement", - "ambition", - "clarity", - "challenge", - "commitment", - "confidence", - "action", - "courage", - "focus", - "breathe", - "gratitude", - "imagination", - "kindness", - "mindfulness", - "knowledge", - "opportunity", - "passion", - "patience", - "practice", - "smile", - "trust", - "understanding", - "wisdom" + "determination", + "success", + "inspiration", + "perspiration", + "grit", + "empathy", + "feelings", + "hope", + "believe", + "try", + "conviction", + "accomplishment", + "achievement", + "ambition", + "clarity", + "challenge", + "commitment", + "confidence", + "action", + "courage", + "focus", + "breathe", + "gratitude", + "imagination", + "kindness", + "mindfulness", + "knowledge", + "opportunity", + "passion", + "patience", + "practice", + "smile", + "trust", + "understanding", + "wisdom" ]; var quotes = [ - "Don’t downgrade your dream just to fit your reality, upgrade your conviction to match your destiny.", - "You are braver than you believe, stronger than you seem and smarter than you think.", - "You are confined only by the walls you build yourself.", - "The one who has confidence gains the confidence of others.", - "Act as if what you do makes a difference. It does.", - "Success is not final, failure is not fatal: it is the courage to continue that counts.", - "Never bend your head. Always hold it high. Look the world straight in the eye.", - "What you get by achieving your goals is not as important as what you become by achieving your goals.", - "Believe you can and you're halfway there.", - "When you have a dream, you've got to grab it and never let go.", - "I can't change the direction of the wind, but I can adjust my sails to always reach my destination.", - "No matter what you're going through, there's a light at the end of the tunnel.", - "It is our attitude at the beginning of a difficult task which, more than anything else, will affect its successful outcome.", - "Life is like riding a bicycle. To keep your balance, you must keep moving.", - "Just don't give up trying to do what you really want to do. Where there is love and inspiration, I don't think you can go wrong.", - 'Limit your "always" and your "nevers."', - "You are never too old to set another goal or to dream a new dream.", - "Try to be a rainbow in someone else's cloud.", - "You do not find the happy life. You make it.", - "Inspiration comes from within yourself. One has to be positive. When you're positive, good things happen.", - "Sometimes you will never know the value of a moment, until it becomes a memory.", - "The most wasted of days is one without laughter.", - "You must do the things you think you cannot do.", - "It isn't where you came from. It's where you're going that counts.", - "It is never too late to be what you might have been.", - "Happiness often sneaks in through a door you didn't know you left open.", - "We must be willing to let go of the life we planned so as to have the life that is waiting for us.", - "Never limit yourself because of others’ limited imagination; never limit others because of your own limited imagination.", - "Be the change that you wish to see in the world.", - "Let us make our future now, and let us make our dreams tomorrow's reality.", - "You don't always need a plan. Sometimes you just need to breathe, trust, let go, and see what happens.", - "If I cannot do great things, I can do small things in a great way.", - "Don't wait. The time will never be just right.", - "With the right kind of coaching and determination you can accomplish anything.", - "If you have good thoughts they will shine out of your face like sunbeams and you will always look lovely.", - "No matter what people tell you, words and ideas can change the world.", - "Each person must live their life as a model for others.", - "A champion is defined not by their wins but by how they can recover when they fall." + "Don’t downgrade your dream just to fit your reality, upgrade your conviction to match your destiny.", + "You are braver than you believe, stronger than you seem and smarter than you think.", + "You are confined only by the walls you build yourself.", + "The one who has confidence gains the confidence of others.", + "Act as if what you do makes a difference. It does.", + "Success is not final, failure is not fatal: it is the courage to continue that counts.", + "Never bend your head. Always hold it high. Look the world straight in the eye.", + "What you get by achieving your goals is not as important as what you become by achieving your goals.", + "Believe you can and you're halfway there.", + "When you have a dream, you've got to grab it and never let go.", + "I can't change the direction of the wind, but I can adjust my sails to always reach my destination.", + "No matter what you're going through, there's a light at the end of the tunnel.", + "It is our attitude at the beginning of a difficult task which, more than anything else, will affect its successful outcome.", + "Life is like riding a bicycle. To keep your balance, you must keep moving.", + "Just don't give up trying to do what you really want to do. Where there is love and inspiration, I don't think you can go wrong.", + 'Limit your "always" and your "nevers."', + "You are never too old to set another goal or to dream a new dream.", + "Try to be a rainbow in someone else's cloud.", + "You do not find the happy life. You make it.", + "Inspiration comes from within yourself. One has to be positive. When you're positive, good things happen.", + "Sometimes you will never know the value of a moment, until it becomes a memory.", + "The most wasted of days is one without laughter.", + "You must do the things you think you cannot do.", + "It isn't where you came from. It's where you're going that counts.", + "It is never too late to be what you might have been.", + "Happiness often sneaks in through a door you didn't know you left open.", + "We must be willing to let go of the life we planned so as to have the life that is waiting for us.", + "Never limit yourself because of others’ limited imagination; never limit others because of your own limited imagination.", + "Be the change that you wish to see in the world.", + "Let us make our future now, and let us make our dreams tomorrow's reality.", + "You don't always need a plan. Sometimes you just need to breathe, trust, let go, and see what happens.", + "If I cannot do great things, I can do small things in a great way.", + "Don't wait. The time will never be just right.", + "With the right kind of coaching and determination you can accomplish anything.", + "If you have good thoughts they will shine out of your face like sunbeams and you will always look lovely.", + "No matter what people tell you, words and ideas can change the world.", + "Each person must live their life as a model for others.", + "A champion is defined not by their wins but by how they can recover when they fall." ]; var savedPosters = []; var currentPoster; // event listeners go here 👇 +window.addEventListener("load", assemblePoster) +// showRandom.addEventListener('click', createPoster) + // functions and event handlers go here 👇 // (we've provided two to get you started)! function getRandomIndex(array) { - return Math.floor(Math.random() * array.length); + return Math.floor(Math.random() * array.length); } function createPoster(imageURL, title, quote) { - return { + return { id: Date.now(), imageURL: imageURL, title: title, quote: quote} +} + +function assemblePoster() { + var randomImage = images[getRandomIndex(images)]; + var randomTitle = titles[getRandomIndex(titles)]; + var randomQuote = quotes[getRandomIndex(quotes)]; + + newPoster = createPoster(randomImage, randomTitle, randomQuote); + + posterImg.src = randomImage; + posterTitle.innerText = randomTitle; + posterQuote.innerText = randomQuote; } \ No newline at end of file diff --git a/styles.css b/styles.css index 0402eaee9..38d78278c 100644 --- a/styles.css +++ b/styles.css @@ -2,145 +2,145 @@ *, *:before, *:after { - box-sizing: border-box; - font-family: "EB Garamond", serif; - margin: auto; - text-align: center; + box-sizing: border-box; + font-family: "EB Garamond", serif; + margin: auto; + text-align: center; } body { - background: ghostwhite; + background: ghostwhite; } button, input { - font-size: 20px; - padding: 10px 20px; + font-size: 20px; + padding: 10px 20px; } button { - background: black; - border: none; - border-radius: 10px; - color: white; + background: black; + border: none; + border-radius: 10px; + color: white; } button:hover { - background: darkslateblue; + background: darkslateblue; } .hidden { - display: none!important; + display: none!important; } /* ~~~~~ MAIN POSTER SECTION ~~~~~ */ .main-poster { - height: 100vh; + height: 100vh; } .poster { - background: black; - display: flex; - flex-direction: column; - justify-content: center; - margin: 20px auto; - padding: 50px 20px; - width: 70%; -} + background: black; + display: flex; + flex-direction: column; + justify-content: center; + margin: 20px auto; + padding: 50px 20px; + width: 70%; + } .poster-img { - background-size: cover; - border: 2px solid white; - max-width: 80%; -} + background-size: cover; + border: 2px solid white; + max-width: 80%; + } .poster-title, .poster-quote { - color: white; - line-height: 1; - width: 90%; + color: white; + line-height: 1; + width: 90%; } .poster-title { - font-size: 60px; - font-weight: normal; - letter-spacing: 20px; - margin-bottom: 10px; - text-transform: uppercase; + font-size: 60px; + font-weight: normal; + letter-spacing: 20px; + margin-bottom: 10px; + text-transform: uppercase; } .main-poster button { - margin: 10px; + margin: 10px; } /* ~~~~~ POSTER FORM SECTION ~~~~~ */ .poster-form { - display: flex; - flex-direction: column; - height: 100vh; + display: flex; + flex-direction: column; + height: 100vh; } .poster-form h2 { - margin-bottom: 30px; + margin-bottom: 30px; } .poster-form form { - align-content: center; - display: flex; - flex-direction: column; - width: 40%; + align-content: center; + display: flex; + flex-direction: column; + width: 40%; } .poster-form input { - display: block; - margin-bottom: 20px; - width: 100%; + display: block; + margin-bottom: 20px; + width: 100%; } .poster-form .divider { - border-bottom: 1px solid black; - margin: auto; - margin-bottom: 20px; - width: 400px; + border-bottom: 1px solid black; + margin: auto; + margin-bottom: 20px; + width: 400px; } /* ~~~~~ SAVED POSTER SECTION ~~~~~ */ .saved-posters { - padding: 40px; + padding: 40px; } .saved-posters-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 20px; - padding: 20px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; + padding: 20px; } .mini-poster { - background: black; - color: white; - height: 340px; - padding: 25px; - width: 425px; + background: black; + color: white; + height: 340px; + padding: 25px; + width: 425px; } .mini-poster img { - height:200px; - width: 300px; + height:200px; + width: 300px; } .mini-poster h2, .mini-poster h4, .delete { - color: white; - line-height: 1; - width: 90%; + color: white; + line-height: 1; + width: 90%; } .mini-poster h2 { - font-size: 30px; - font-weight: normal; - letter-spacing: 5px; - margin-bottom: 10px; - text-transform: uppercase; + font-size: 30px; + font-weight: normal; + letter-spacing: 5px; + margin-bottom: 10px; + text-transform: uppercase; } From 9dcea7220a42255710c534e458ede55870af1f97 Mon Sep 17 00:00:00 2001 From: Jim Macur Date: Tue, 20 Aug 2024 20:15:07 -0600 Subject: [PATCH 2/5] show another random poster button --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 78ab1a9c9..a2befb731 100644 --- a/src/main.js +++ b/src/main.js @@ -106,7 +106,7 @@ var currentPoster; // event listeners go here 👇 window.addEventListener("load", assemblePoster) -// showRandom.addEventListener('click', createPoster) +showRandom.addEventListener('click', assemblePoster) // functions and event handlers go here 👇 // (we've provided two to get you started)! From 379a2728f6a32b5a3f19ecedccaa8b9be8d9c3d6 Mon Sep 17 00:00:00 2001 From: Jim Macur Date: Tue, 20 Aug 2024 20:21:45 -0600 Subject: [PATCH 3/5] remove pseudocode --- src/main.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/main.js b/src/main.js index a2befb731..0f618e7c5 100644 --- a/src/main.js +++ b/src/main.js @@ -103,13 +103,9 @@ var quotes = [ var savedPosters = []; var currentPoster; -// event listeners go here 👇 - window.addEventListener("load", assemblePoster) showRandom.addEventListener('click', assemblePoster) -// functions and event handlers go here 👇 -// (we've provided two to get you started)! function getRandomIndex(array) { return Math.floor(Math.random() * array.length); } From 2aba0c17c76f916cd76cefc7d12b4d42b51f53de Mon Sep 17 00:00:00 2001 From: Jim Macur Date: Tue, 20 Aug 2024 20:24:46 -0600 Subject: [PATCH 4/5] remove all single quotes --- src/main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/main.js b/src/main.js index 0f618e7c5..bd4e1d26b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ -var showRandom = document.querySelector('.show-random'); -var posterImg = document.querySelector('.poster-img'); -var posterTitle = document.querySelector('.poster-title'); -var posterQuote = document.querySelector('.poster-quote'); +var showRandom = document.querySelector(".show-random"); +var posterImg = document.querySelector(".poster-img"); +var posterTitle = document.querySelector(".poster-title"); +var posterQuote = document.querySelector(".poster-quote"); var images = [ "./assets/bees.jpg", @@ -104,7 +104,7 @@ var savedPosters = []; var currentPoster; window.addEventListener("load", assemblePoster) -showRandom.addEventListener('click', assemblePoster) +showRandom.addEventListener("click", assemblePoster) function getRandomIndex(array) { return Math.floor(Math.random() * array.length); From b1ec5f83e607788e4987a8e5a50c93cd6f982cc3 Mon Sep 17 00:00:00 2001 From: Jim Macur Date: Tue, 20 Aug 2024 21:04:56 -0600 Subject: [PATCH 5/5] pseudo code for it 1 --- src/main.js | 44 +++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 41 insertions(+), 3 deletions(-) diff --git a/src/main.js b/src/main.js index bd4e1d26b..1b4d70ced 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,10 @@ var showRandom = document.querySelector(".show-random"); +var showForm = document.querySelector(".show-form"); +var showSaved = document.querySelector(".show-saved"); +var showMain = document.querySelector(".show-main"); +var backToMain = document.querySelector(".back-to-main"); +// var savePoster = document.querySelector(".save-poster"); + var posterImg = document.querySelector(".poster-img"); var posterTitle = document.querySelector(".poster-title"); var posterQuote = document.querySelector(".poster-quote"); @@ -105,6 +111,10 @@ var currentPoster; window.addEventListener("load", assemblePoster) showRandom.addEventListener("click", assemblePoster) +// showForm.addEventListener("click", makeYourPoster) +// showSaved.addEventListener("click", showSavedPosters) +// showMain.addEventListener("click", showMain) +// backToMain.addEventListener("click", backToMain) function getRandomIndex(array) { return Math.floor(Math.random() * array.length); @@ -123,9 +133,37 @@ function assemblePoster() { var randomTitle = titles[getRandomIndex(titles)]; var randomQuote = quotes[getRandomIndex(quotes)]; - newPoster = createPoster(randomImage, randomTitle, randomQuote); - posterImg.src = randomImage; posterTitle.innerText = randomTitle; posterQuote.innerText = randomQuote; -} \ No newline at end of file +} + +function makeYourPoster() { +// .poster-form is unhidden +// .main-poster is hidden +} + +function showSavedPosters() { +// .saved-posters is unhidden +// .main-poster is hidden +} + +function showMain() { +// .poster-form is hidden +// .main-poster is unhidden +} + +function backToMain(){ +// .saved-posters is hidden +// .main-poster is unhidden +} + + + + + + + + + +// newPoster = createPoster(randomImage, randomTitle, randomQuote);