freeCodeCamp.org-Back-End-Dev-and-APIs/urlshortener
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: refactor html and css

Browse Source
This commit is contained in:
Kris Koishigawa 2020-09-18 17:45:36 +09:00
parent b4c1fe7f2e
commit 80cf6ebb27
2 changed files with 26 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/style.css
View File

@ -7,7 +7,7 @@ body {
line-height: 1.4em; line-height: 1.4em;
} }
.container { main {
padding: 0; padding: 0;
margin-top: 40px; margin-top: 40px;
} }
@ -16,7 +16,7 @@ h3 {
margin-top: 30px; margin-top: 30px;
} }
.footer { footer {
margin-top: 40px; margin-top: 40px;
} }
@ -54,8 +54,6 @@ a {
} }
form { form {
border: solid 1px black;
border-radius: 5px;
margin: 10px auto; margin: 10px auto;
padding: 20px; padding: 20px;
max-width: 600px; max-width: 600px;

57
views/index.html
View File

@ -12,39 +12,30 @@
</head> </head>
<body> <body>
<div class="container"> <h1>API Project: URL Shortener Microservice</h1>
<h2>API Project: URL Shortener Microservice</h2> <main>
<h3>User Story:</h3> <section>
<ol> <h2>Short URL Creation</h2>
<li> <form action="api/shorturl/new" method="POST">
I can <code>POST</code> a URL to <code>[project_url]/api/shorturl/new</code> and I will receive a shortened URL in the JSON <fieldset>
response.<br /> <legend>URL Shortener</legend>
Example: <code>{ "original_url": "www.google.com", "short_url": 1 }</code> <label for="url_input">URL:</label>
</li> <input id="url_input" type="text" name="url" value="https://www.freecodecamp.org" />
<li> <input type="submit" value="POST URL" />
If I pass an invalid URL that doesn't follow the <code>http(s)://www.example.com(/more/routes)</code> format, </fieldset>
the JSON response will contain an error like <code>{ "error": "invalid URL" }</code><br /> </form>
HINT: To be sure that the submitted URL points to a valid site, you can use the function </section>
<code>dns.lookup(host, cb)</code> from the <code>dns</code> core module. <section>
</li> <h3>Example Creation:</h3>
<li>When I visit the shortened URL, it will redirect me to my original link.</li> <p><code>POST [project_url]/api/shorturl/new</code> - Body (URL encoded): <code>url=https://www.google.com</code></p>
</ol> <h3>Example Usage:</h3>
<a href="https://url-shortener.freecodecamp.repl.co/api/shorturl/3">[project_url]/api/shorturl/3</a>
<h3>Short URL Creation</h3> <h3>Will Redirect to:</h3>
<p>Example: <code>POST [project_url]/api/shorturl/new</code> - <code>https://www.google.com</code></p> <p>https://forum.freecodecamp.org/</p>
<form action="api/shorturl/new" method="POST"> </section>
<label for="url_input">URL to be shortened</label> </main>
<input id="url_input" type="text" name="url" value="https://www.freecodecamp.org" /> <footer>
<input type="submit" value="POST URL" />
</form>
<h3>Example Usage:</h3>
<a href="https://url-shortener.freecodecamp.repl.co/api/shorturl/3"> [this_project_url]/api/shorturl/3 </a>
<h3>Will Redirect to:</h3>
<p>https://forum.freecodecamp.org/</p>
</div>
<div class="footer">
<p>By <a href="https://www.freecodecamp.org">freeCodeCamp</a></p> <p>By <a href="https://www.freecodecamp.org">freeCodeCamp</a></p>
</div> </footer>
</body> </body>
</html> </html>