aliriegray / learn-http Goto Github PK

A website to help you learn HTTP status codes.

JavaScript 98.65% HTML 0.93% CSS 0.42%

learn-http's Introduction

Hi there 👋

I'm Alirie, a full-stack software engineer, student, and writer from Los Angeles. I'm passionate about video games as a storytelling medium and the potential of technology as a force for good in the world. Also a perpetual project-starter working on being more of a "project-finisher."

🐣 Current projects

Dragon Age World State Manager app, a web app I'm working on in the MERN stack that allows users to create and track custom world states and story branches for Bioware's RPG series Dragon Age.
Conduit of the Miracle, a sci-fi/fantasy visual novel I'm writing in the Ren'Py engine that follows the journey of a young woman to carry out her late husband's final wish involving a strange artifact and an ancient ritual.

🔭 Professional objectives

Finish my bachelor's degree in computer science after taking a several year hiatus
Work at a company with a positive social impact
Lead a team creating commercial indie video games

🌹 Personal goals and interests

Conversational fluency in Spanish and Arabic
Publish a novel

💻 Languages & Technologies

learn-http's People

Watchers

Forkers

jeffchiucp

learn-http's Issues

Questions are too random...

The questions are presented randomly but this means the same question is presented twice in a row!

Suggestion: Randomize the array of questions, pop a question off the top until the array is empty then refill the array with new randomized list of the questions. This way the questions would not repeat.

Styles should be in a file

You should really move the styles into a file. Put a styles.css in the public folder.

Forms...

I'm not convinced that the answers should each be wrapped in a form element. Really these can just be buttons with out the form wrapper.

A form represents a collection of form elements that are collected and submitted. The form acts to group these. A form is not required to submit an action to the server.

If you feel strongly about using a form it might be best to use a single form element wrapping all buttons. Selecting a button on the form would be like saying you are submitting an answer to a form question.

I think just a button would be good enough, simpler structure, and easier to style.

That said making these changes means you would have to rewrite some of the code here. Rather than submitting the form and refreshing the page you could send a message to the server with JS and return the answer.

Sign Up form not working?

The Sign Up form wasn't working for me? Error: secretOrPrivateKey must have a value

I'm guessing you haven't set:

process.env.SECRET

in:

var token = jwt.sign({ id: user.id }, process.env.SECRET, { expiresIn: "60 days" });

Follow my example here: https://github.com/soggybag/web-2-reddit-clone

Notice the file named: .env
See the first line server.js

jQuery ready...

You have:

<script>
  $(document).ready(function(){
    // console.log($('.modal'));
    $('.modal').modal();
  });
  </script>

Which is classic jQuery. You can shorten this to:

  $(function(){
    // console.log($('.modal'));
    $('.modal').modal();
  });
  </script>

Really you only need ready because your script is at the top of your document! It is considered good practice to place the script tag at the bottom of the page in which case you don't need the ready function at all.

<body>
<!--  page content -->

<script>
 // console.log($('.modal'));
 $('.modal').modal();
</script>

Note that I said good practice not best practice, this one of those topics that can generate a lot of conversation on the inter webs.

Suggestion...

Might be good to keep score. Might look like: 4/5 (4 correct out of five)
You might also show the question number.
Show the correct answer by highlighting the button.
Give a summary of the score after answering all questions. Something like: You got 7 out 10 correct 70%.

Read me needs work...

This read me needs some details. Use some headings like these and fill in the information.

Title
Description
Getting Started
Built with
Todo

Footer doesn't reach the bottom of the page

When the page is open wide the footer doesn't reach the bottom of the page. Add:

body, html {
    height: 100%;
}

This will allow the body and html elements to fill the vertical height. Otherwise they are only as tall as their content.

Materialize.js

You don't need both materialize.min.js and materialize.js one or the other is good. They are both the same code, the file with .min is just minified, use this for production.

Might be a good idea to get this file from a CDN? You are already doing this with jQuery.

Button need some margin

On a wide screen the buttons all meet. They need a little space in-between:

/* Add a little margin between buttons */
.answers > form {
  margin: 0 5px;
}
/* Remove the margin off the left of the left most button */
.answers > form:first-child { margin-left: 0; }
/* Remove the margin off the right of the right most button */
.answers > form:last-child { margin-right: 0; }