Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Random image #401

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Random image #401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dc99657
random image, quote, and title
jimmacur Aug 21, 2024
9dcea72
show another random poster button
jimmacur Aug 21, 2024
379a272
remove pseudocode
jimmacur Aug 21, 2024
2aba0c1
remove all single quotes
jimmacur Aug 21, 2024
b1ec5f8
pseudo code for it 1
jimmacur Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
72 changes: 36 additions & 36 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=EB+Garamond&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Hang In There</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=EB+Garamond&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Hang In There</title>
</head>
<body>
<section class="main-poster">
<article class="poster">
<img class="poster-img" src="" alt="nothin' to see here">
<h1 class="poster-title">Title</h1>
<h3 class="poster-quote">Quote</h3>
</article>
<button class="save-poster">Save This Poster</button>
<button class="show-saved">Show Saved Posters</button>
<button class="show-random">Show Another Random Poster</button>
<button class="show-form">Make Your Own Poster</button>
</section>
<section class="poster-form hidden">
<form>
<h2>Create your own motivational poster</h2>
<label for="poster-image-url">Image url</label>
<input type="text" name="poster-image-url" id="poster-image-url" placeholder="https://gph.is/2n553Ra">
<label for="poster-title">Motivational title</label>
<input type="text" name="poster-title" id="poster-title" placeholder="Growth Mindset">
<label for="poster-quote">Motivational quote</label>
<input type="text" name="poster-quote" id="poster-quote" placeholder="Hang in there!">
<button class="make-poster">Show my poster</button>
</form>
<div class="divider"></div>
<button class="show-main">Nevermind, take me back!</button>
</section>
<section class="saved-posters hidden">
<h2>Saved Posters</h2>
<div class="saved-posters-grid"></div>
<button class="back-to-main">Back to Main</button>
</section>
<script src="./src/main.js"></script>
<section class="main-poster">
<article class="poster">
<img class="poster-img" src="" alt="nothin' to see here">
<h1 class="poster-title">Title</h1>
<h3 class="poster-quote">Quote</h3>
</article>
<button class="save-poster">Save This Poster</button>
<button class="show-saved">Show Saved Posters</button>
<button class="show-random">Show Another Random Poster</button>
<button class="show-form">Make Your Own Poster</button>
</section>
<section class="poster-form hidden">
<form>
<h2>Create your own motivational poster</h2>
<label for="poster-image-url">Image url</label>
<input type="text" name="poster-image-url" id="poster-image-url" placeholder="https://gph.is/2n553Ra">
<label for="poster-title">Motivational title</label>
<input type="text" name="poster-title" id="poster-title" placeholder="Growth Mindset">
<label for="poster-quote">Motivational quote</label>
<input type="text" name="poster-quote" id="poster-quote" placeholder="Hang in there!">
<button class="make-poster">Show my poster</button>
</form>
<div class="divider"></div>
<button class="show-main">Nevermind, take me back!</button>
</section>
<section class="saved-posters hidden">
<h2>Saved Posters</h2>
<div class="saved-posters-grid"></div>
<button class="back-to-main">Back to Main</button>
</section>
<script src="./src/main.js"></script>
</body>
</html>
250 changes: 150 additions & 100 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,169 @@
// query selector variables go here 👇
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");

// 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", assemblePoster)
// showForm.addEventListener("click", makeYourPoster)
// showSaved.addEventListener("click", showSavedPosters)
// showMain.addEventListener("click", showMain)
// backToMain.addEventListener("click", backToMain)

// 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)];

posterImg.src = randomImage;
posterTitle.innerText = randomTitle;
posterQuote.innerText = randomQuote;
}

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);
Loading