This repository contains the wikiCap web application.
-- Design and architect features across a frontend -- Communicate and collaborate in a technical environment -- Integrate JavaScript and an external API -- Debug issues in small- to medium-sized projects -- Build and iterate on a project MVP +[Go Back to the top](#wikiCap) -## Introduction +## Features -Welcome to JavaScript Project Mode! +A cryptocurrency realtime market information using a public APIs to display market prices and news. +A User can see the cryptocurrency prices. +A User can see realtime cryptocurrency news +A User can store notes -You’ve worked so hard to get here and have learned a ton. Now it's time to bring -it all together! +[Go Back to the top](#wikiCap) + ### Requirements -For this project, you're going build a Single Page Application (**SPA**). -Building this application will be challenging because it will integrate -everything you've learned up to this point. Your frontend will be built with -HTML, CSS, and JavaScript and will communicate with a public API. + * Access to a computer or any other garget + * Access to internet + * visit the website on your browser + **** + [Go Back to the top](#wikiCap) -### Project Requirements +### Live Link -1. Your app must be a HTML/CSS/JS frontend that accesses data from a public API. - All interactions between the client and the API should be handled - asynchronously and use JSON as the communication format. +- Click this link to view the live application [https://sobitd.github.io/wikiCap/] -2. Your entire app must run on a single page. There should be NO redirects. In - other words, your project will contain a single HTML file. -3. Your app needs to incorporate at least 3 separate event listeners - (DOMContentLoaded, click, change, submit, etc). +### Technology Used -4. Some interactivity is required. This could be as simple as adding a "like" - button or adding comments. These interactions do not need to persist after - reloading the page. +* HTML - which was used to develope the structure off the pages. +* CSS - which was used to style the User Interface. +* JS - was used to add interactivity and functionality. +* JSON - a json file that has the product data. +* +[Go Back to the top](#wikiCap) -5. Follow good coding practices. Keep your code DRY (Do not repeat yourself) by - utilizing functions to abstract repetitive code. +## Known Bugs -### Stretch Goals +* display notes on the Pin Notes Here section -1. Use [json-server][] in your project to persist your app's interactivity. +## MIT License -## Strategy, Timeline, and Tips +Copyright (c) [2022] [wikiCap] -### Planning +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: -- Plan out your features -- Develop user stories - - “As [ a user ], I want [ to perform this action ] so that - [ I can accomplish this goal ].” - - Features should not need you there to explain them to users -- Plan out the structure of your JSON requests +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. -### Project Pitches +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. -Before you start working on your project, you'll pitch your project idea to your -instructors for approval and feedback. +## Authors Info -For your project pitch, you should include: - -- The basic story of your application -- The core features of your MVP -- The API data you'll be using and how you'll use it -- Challenges you expect to face -- How you are meeting the requirements of the project - -Feel free to send this pitch to your instructor via slack asynchronously. - -### MVP ASAP - -- Build a Minimum Viable Product (MVP) as quickly as possible. - - Pick an API and explore it early on to ensure it will work for your need - -### Instructor Guidance - -You should strive to solve problems independently, but you also shouldn't waste -your time stuck on a problem. A good guideline for a small bug is the rule of -10s: - -- 10 minutes debugging the code -- 10 minutes using Google and StackOverflow to try to find an answer -- 10 minutes asking your fellow students for help -- Asking an instructor - -If you seek out instructor guidance on your design from the start, they might -help steer you into design and architectural decisions that will help you down -the road. That will also give the instructors context for what your app is -supposed to do, so you won't need to explain everything to them when asking for -help debugging. - -### Guidelines for Staying Organized - -**Write down** the decisions you make about your project. This will not only -help you think more clearly, it will also help you communicate your project to -instructors when asking for help. In addition to writing everything down, we -also recommend the following to help stay organized and on track: - -- Describe/sketch your ideas (use diagrams!). -- Start by creating a frontend directory with the basic files you'll need -- Next, build enough code to get some API data to work with. Don't worry about - building all of your async code yet, just get to the point where you can - access one endpoint on an API, then start working on getting that data - displayed. -- Then, continue to build additional async code and frontend features. -- Continue building features one by one. - -Check in with your instructors to make sure your scope and timeline are -manageable. - -### JSON Server Instructions - -> **Note**: Using `json-server` is a stretch goal, so make sure you have a -> working MVP before trying to set up `json-server`! - -You can use this [json-server template][] to generate your backend code. Using -this template will make it easier to deploy your backend later on. - -[json-server template]: https://github.com/learn-co-curriculum/json-server-template - -If you prefer, instead of using the template, you can create a `db.json` file -with a structure in the root of your project that looks like this: - -```json -{ - "toys": [ - { - "id": 1, - "name": "Woody", - "image": "http://www.pngmart.com/files/3/Toy-Story-Woody-PNG-Photos.png", - "likes": 8 - }, - { - "id": 2, - "name": "Buzz Lightyear", - "image": "http://www.pngmart.com/files/6/Buzz-Lightyear-PNG-Transparent-Picture.png", - "likes": 14 - } - ] -} -``` - -Then, assuming you have `json-server` installed globally, you can run this -command to run the server: - -```console -$ json-server --watch db.json -``` - -Whatever top-level keys exist in your `db.json` file will determine the routes -available. In the example above, since we have a key of `toys` pointing to an -array of toy objects, `json-server` will generate the following routes: - -- `GET /toys` -- `POST /toys` -- `GET /toys/:id` -- `PATCH /toys/:id` -- `DELETE /toys/:id` - -You can consult the [json-server docs][] for more information. - -[json-server docs]: https://www.npmjs.com/package/json-server - -## Resources - -- [Public APIs](https://github.com/public-apis/public-apis) -- [Fun APIs](https://apilist.fun/) -- [json-server][] - -[json-server]: https://www.npmjs.com/package/json-server +Gmail - [Daniel Sobit](daniel.sobit@student.moringaschool.com) diff --git a/db.json b/db.json new file mode 100644 index 00000000..b61838dc --- /dev/null +++ b/db.json @@ -0,0 +1,99 @@ +{ + "posts": [ + { + "id": 1, + "title": "json-server", + "author": "typicode" + }, + { + "text": "IOIOIO", + "id": 31 + }, + { + "text": "JUIIOIO", + "id": 32 + }, + { + "text": "KKKK", + "id": 33 + }, + { + "text": "jdkjd", + "id": 34 + }, + { + "text": "ccc", + "id": 35 + }, + { + "text": "ddd", + "id": 36 + }, + { + "text": "sss", + "id": 37 + }, + { + "text": "ddd", + "id": 38 + }, + { + "text": "ddd", + "id": 39 + }, + { + "text": "sobit", + "id": 40 + }, + { + "text": "a", + "id": 41 + }, + { + "text": "s", + "id": 42 + }, + { + "text": "g", + "id": 43 + }, + { + "text": "ddd", + "id": 44 + }, + { + "text": "fffd", + "id": 45 + }, + { + "text": "gggf", + "id": 46 + }, + { + "text": "dmjd", + "id": 47 + }, + { + "text": "dhd", + "id": 48 + }, + { + "text": "igjfkld", + "id": 49 + }, + { + "text": "jjkj", + "id": 50 + } + ], + "comments": [ + { + "id": 1, + "body": "some comment", + "postId": 1 + } + ], + "profile": { + "name": "typicode" + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..a874349b --- /dev/null +++ b/index.html @@ -0,0 +1,312 @@ + + + + + + + + + + + + +The Simplest Way to track
Multiple Currencies
WikiCap allows you to explore the crypto world easily. Trust WikiCap to be your crypto market + partner +
+ +
+ 
+ 
+ | Market | +Coin | +Last price | +24 hour change | +Chart | +Market capitalization | + +
|---|
The best choice for crypto market information
and news, with the various super friendly
+
services
+ we offer
+ Security is guaranteed, we always maintain privacy and maintain the quality of our products +
+
+ We provide transparent services, our systems and ecosystems can be monitored always
+
+ Any service we provide to users is our best experience or services for our beloved customers +
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+