https://github.com/mgastonportillo/one-challenge-01-cypher

Text decoder/encoder with vanilla JavaScript. My approach on challenge #1 for Oracle Next Education course.
https://github.com/mgastonportillo/one-challenge-01-cypher

challenge javascript vanilla

Last synced: 20 days ago
JSON representation

Text decoder/encoder with vanilla JavaScript. My approach on challenge #1 for Oracle Next Education course.

• Host: GitHub
• URL: https://github.com/mgastonportillo/one-challenge-01-cypher
• Owner: mgastonportillo
• Created: 2022-08-07T02:52:33.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-30T20:10:42.000Z (about 2 years ago)
• Last Synced: 2023-06-04T20:24:04.318Z (over 1 year ago)
• Topics: challenge, javascript, vanilla
• Language: CSS
• Homepage:
• Size: 554 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
ONE - Challenge: Text Encryption

Challenge #1 for ONE (Oracle Next Education) programme



Preview



Live preview



What's this about?

The first challenge is an invitation to create a web application that allows the users to encrypt and decrypt text, following a set pattern of rules. The prototype design was delivered through Figma, but as explained within the kanban board in Trello, it allows complete freedom creativity-wise.



Instructions



Must work with lowercase characters only.

Characters with accents and other special characters are forbidden.

The user must have the ability to encrypt a text as well as to decrypt it.
Example:
"catto" => "caittober"
"caittober" => "catto"



The (web) app must provide a field for the user to write down their text, and they should always be able to decide whether they want to decrypt or to encrypt it.

The outcome text must be displayed on the screen.



Extra: a button that copies the outcome text to the clipboard, allowing the same functionality that ctrl + C or the "copy" option from app menus.





Encryption keys


e

i

a

o

u

enter

imes

ai

ober

ufat





And reverse order for decryption.



My solution

I decided to approach the project with the following characteristics in mind:



Utilise the Mobile First paradigm.

Make it a responsive web app, able to work on mobile, tablets and desktop screens.

Practice and showcase some DOM manipulation with JavaScript.

Limit the container div for the outcome text to be displayed in mobile and tablet screens only if there's an outcome, and once it's generated then scroll down to display it.

Add a button to scruoll up on mobile and tablet screens.

Add custom notification messages to display errors or successful actions, using fancy animations.

Add a favicon.

Display my personal brand (gale).





Concepts and Technologies



HTML

CSS

JavaScript

Vanilla

Strings methods

DOM manipulation

Problem solving