Hi, my name is Cliff. I'm a senior software engineer with over 4 years of professional development experience building cutting-edge web/mobile applications.
I'm starting a new coding challenge for 30 days. I plan on developing a small app each day using a wide range of technologies including JavaScript, Python, HTML, CSS and hopefully many more.
In making this post I hope that others can see my journey and potentially learn something or comment if they have any improvements!! I'll be documenting the entire process here on dev.to, so I hope you all will follow along with me,
So, lets jump right into the app!
Firstly, I'll start the challenge by creating a random quote web app. My plan with this project is to keep things simple and only use vanilla JavaScript, HTML, and CSS.
Here's a couple of requirements that I would like from this app:
-
The background and main color theme of the app will change to another random color on page refresh.
-
In the center of the page, the user should see a component with a quote, author, and links to share the quote via twitter/tumbler.
-
The component must contain a button to get a new quote if the user presses it.
So jumping right in, I'm going to first focus on setting a random background/theme color for the app.
I've created a JavaScript filed name script.js, which I will use to write the scripts to generate a random color.
We can generate a random color a few lines of code. Right now to keep it simple, we will choose a random color between 3 different colors stored in a list.
Then, create a function that will use the document object to change the background and theme color to the random color selected.
script.js:
This will be our script.js file. Now we can create a basic html and css markup.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Random Quote</title> </head> <body> <div id="wrapper"> <div class="box"> <div id="content" class="box_content"> Hello </div> </div> <div class="footer">by <a href="https://github.com/BlueBoi904">BlueBoi904</a> </div> </div> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </body> </html> styles.css:
.box { display: flex; align-items: center; justify-content: center; background-color: antiquewhite; } .box_content { } body { background-color: #333; color: #333; font-family:sans-serif; font-weight: 400; display: flex; justify-content: center; align-items: center; height: 100vh; } Now whenever we visit the page, the page and text will be a random color.
So now that we have requirement #1 satisfied, lets move on to the second!
Javascript:
const projectName = 'random-quote-machine'; let quotesData; var colors = [ '#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', '#472E32', '#BDBB99', '#77B1A9', '#73A857' ]; var currentQuote = '', currentAuthor = ''; function getQuotes() { return $.ajax({ headers: { Accept: 'application/json' }, url: 'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json', success: function (jsonQuotes) { if (typeof jsonQuotes === 'string') { quotesData = JSON.parse(jsonQuotes); console.log('quotesData'); console.log(quotesData); } } }); } function getRandomQuote() { return quotesData.quotes[ Math.floor(Math.random() * quotesData.quotes.length) ]; } function getQuote() { let randomQuote = getRandomQuote(); currentQuote = randomQuote.quote; currentAuthor = randomQuote.author; $('#tweet-quote').attr( 'href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor) ); $('#tumblr-quote').attr( 'href', 'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=' + encodeURIComponent(currentAuthor) + '&content=' + encodeURIComponent(currentQuote) + '&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button' ); $('.quote-text').animate({ opacity: 0 }, 500, function () { $(this).animate({ opacity: 1 }, 500); $('#text').text(randomQuote.quote); }); $('.quote-author').animate({ opacity: 0 }, 500, function () { $(this).animate({ opacity: 1 }, 500); $('#author').html(randomQuote.author); }); var color = Math.floor(Math.random() * colors.length); $('html body').animate( { backgroundColor: colors[color], color: colors[color] }, 1000 ); $('.button').animate( { backgroundColor: colors[color] }, 1000 ); } $(document).ready(function () { getQuotes().then(() => { getQuote(); }); $('#new-quote').on('click', getQuote); }); HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /> <div id="wrapper"> <div id="quote-box"> <div class="quote-text"> <i class="fa fa-quote-left"> </i><span id="text"></span> </div> <div class="quote-author">- <span id="author"></span></div> <div class="buttons"> <a class="button" id="tweet-quote" title="Tweet this quote!" target="_top" > <i class="fa fa-twitter"></i> </a> <a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank" > <i class="fa fa-tumblr"></i> </a> <button class="button" id="new-quote">New quote</button> </div> </div> <div class="footer">by <a href="https://codepen.io/BlueBoi904/">BlueBoi904</a></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> SCSS:
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500'); * { margin: 0; padding: 0; list-style: none; vertical-align: baseline; } div { position: relative; z-index: 2; } body { background-color: #333; color: #333; font-family: 'Raleway', sans-serif; font-weight: 400; display: flex; justify-content: center; align-items: center; height: 100vh; } .footer { width: 450px; text-align: center; display: block; margin: 15px auto 30px auto; font-size: 0.8em; color: #fff; a { font-weight: 500; text-decoration: none; color: #fff; } } #quote-box { border-radius: 3px; position: relative; //margin:8% auto auto auto; width: 450px; padding: 40px 50px; display: table; background-color: #fff; .quote-text { i { font-size: 1em; margin-right: 0.4em; } text-align: center; width: 450px; height: auto; clear: both; font-weight: 500; font-size: 1.75em; } .quote-author { width: 450px; height: auto; clear: both; padding-top: 20px; font-size: 1em; text-align: right; } .buttons { width: 450px; margin: auto; display: block; .button { height: 38px; border: none; border-radius: 3px; color: #fff; background-color: #333; outline: none; font-size: 0.85em; padding: 8px 18px 6px 18px; margin-top: 30px; opacity: 1; cursor: pointer; &:hover { opacity: 0.9; } &#tweet-quote, &#tumblr-quote { float: left; padding: 0px; padding-top: 8px; text-align: center; font-size: 1.2em; margin-right: 5px; height: 30px; width: 40px; } &#new-quote { float: right; } } } } Thanks for reading along, please check in for the next progress update!
Cliff