What would Valentine's Day be without some cheesy pickup lines?

·

2 min read

The project

I've heard my fair share of cheesy pickup lines and as much as my eyes like to roll at the sound of some of them, I figured this could be a fun little project to try out!

The challenge

I would like you to create a website for me, that will consist of three files:

  • index.html - the HTML page itself

  • style.css - the CSS for the elements of the page (to make it look as close to what I have created)

  • script.js - the Javascript that makes it all work!

The result

Make me something that does the following:

  • When you click the 'Generate' button, it generates a new pick-up line.

  • Make the pickup line appear in a pink rounded box with a red dotted border.

Areas to look into

I suggest you look into the following areas to help you with this:

  • JSON files - you can use pickup lines you find yourself, or you can download the JSON I produced at the bottom of this page.

  • XMLHttpRequest as a function/method, and how it can read external files.

  • HTML and CSS generally - how to get a button to run a function, and make the function change HTML on the page (specifically the innerHTML method)

The result

I'd like you to make the end result look as close to this as possible!

Image

Resources

Here's a JSON file for you to use for this project!

https://file.io/dwLA4ePbr9yX

I promise this file is safe - it is just a JSON containing a bunch of pickup lines (around 50!)

I hope you all have fun with this project! I can't wait to see everyone's results!

I'll post up my version and how I did it including a detailed explanation, on Valentine's Day! ❤️