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.

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

first commit #215

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
44 changes: 26 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
# ↔️ Week08 Bootcamp2019a Project: Server Side Palindrome Checker
# Palindrome Checker 🔄

### Goal: Create a simple web application that uses the fs and http modules to validate if a string is a palindrome server side.
### Description
Welcome to the Palindrome Checker—a simple web application that helps you determine whether a given text is a palindrome or not. A palindrome is a word, verse, sentence, or number that reads the same backward or forward.

### How to submit your code for review:
### How to Use
1. Input text in the text box.
2. Click on the "Check" button.
3. The app will display whether the entered text is a palindrome or not.

- Fork and clone this repo
- Create a new branch called answer
- Checkout answer branch
- Push to your fork
- Issue a pull request
- Your pull request description should contain the following:
- (1 to 5 no 3) I completed the challenge
- (1 to 5 no 3) I feel good about my code
- Anything specific on which you want feedback!
<img src="palindrome-checker.png" width="500px">

Example:
```
I completed the challenge: 5
I feel good about my code: 4
I'm not sure if my constructors are setup cleanly...
```
### Tech Used
- <strong>Node.js</strong>: Powering the server-side functionality.
- <strong>HTML, CSS, JavaScript</strong>: Crafting an interactive and visually appealing front-end.

### Lessons Learned
- <strong>Server-Side Development</strong>
- <strong>HTTP Server</strong>: Creating a basic HTTP server using Node.js.
- <strong>URL Paths</strong>: Using the `url` module to parse and handle different URL paths.
- <strong>Query Parameters</strong>: Utilizing the `querystring` module to parse and extract parameters from the query string.
- <strong>Front-End Design</strong>
- <strong>Interactive JavaScript</strong>: Implementing interactive features with JavaScript, such as fetching data from the server and updating the UI dynamically.
- <strong>External Libraries</strong>
- <strong>Figlet</strong>: Integrating the Figlet library for generating ASCII art, adding a creative touch to error messages.
- <strong>Project Organization</strong>
- <strong>File Structure</strong>: Organizing files into appropriate directories for efficient code management.
- <strong>Resource Handling</strong>: Managing resources like HTML, CSS, and JS files appropriately.
- <strong>Local Deployment</strong>
- Setting up and running the application locally for testing and development purposes.
57 changes: 57 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');

* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
align-items: center;
padding: 5%;
background: linear-gradient(50deg, #8EC5FC 0%, #E0C3FC 100%);
height: 100vh;
}

textarea {
width: 30rem;
margin: 1rem 0 10px 0;
padding: 1rem;
background: rgba(250, 250, 250, 0.75);
box-shadow: -10px 10px 0px #C8BAFF;
border: none;
outline: none;
border-radius: 10px;
}

/* The following is modified from Button 39 on
https://getcssscan.com/css-buttons-examples */

button {
appearance: none;
padding: 0.5rem 1rem;
margin: 1rem 0;
cursor: pointer;
font-size: 1rem;
background-color: #FFF;
border: 1px solid #DBDBDB;
border-radius: 10px;
user-select: none;
touch-action: manipulation;
}

button:active {
border-color: #4A4A4A;
outline: 0;
}

button:hover {
border-color: #B5B5B5;
}

button:focus:not(:active) {
box-shadow: rgba(72, 95, 199, 0.25) 0 0 0 .125em;
}
22 changes: 22 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Palindrome Checker</h1>

<p>pal·in·drome<br>
<em>noun.</em> a word, verse, sentence, or number that reads the same backward or forward</p>
<!-- Merriam-Webster. (n.d.). Palindrome. In Merriam-Webster.com dictionary. Retrieved October 29, 2023, from https://www.merriam-webster.com/dictionary/palindrome -->

<textarea placeholder="Go hang a salami! I'm a lasagna hog!"></textarea>
<button type="button" name="button">Check</button>

<h2></h2>

<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
12 changes: 12 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
document.querySelector('button').addEventListener('click', checkIfPalindrome)

function checkIfPalindrome() {
const input = document.querySelector('textarea').value

fetch(`/api?input=${input}`)
.then(response => response.json())
.then((data) => {
console.log(data)
document.querySelector('h2').innerText = data.answer
})
}
13 changes: 13 additions & 0 deletions node_modules/figlet/.jshintrc

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/figlet/.npmignore

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions node_modules/figlet/.travis.yml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 42 additions & 0 deletions node_modules/figlet/Gruntfile.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions node_modules/figlet/LICENSE.txt

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading