Giter Club home page Giter Club logo

church-congregation's Introduction

Church congregation

This website is for the whole members and visitors to this congregation who can interact with any activity (prayer, prayer meeting, conferences, events) by getting whole the material and presentation of static data. The priest and the servants of God shall have an administrative role by inputting all material that is relating to all the work to be presented to them and members of the congregation. All information related to all activities to be presented to visitors and them of the congregation. For further development in the near future, all associates should be able to register and log in so that they can also enter information and participate in the digital activity and post news, pictures, video and live streaming for(prayer,prayer meetings, conferences, events) relating to this gathering.

UX

In general, this website presents information about the activity(prayer, prayer meetings, conferences, events) related to the church congregation and its members and visitors. This website is for the whole members and visitors to this congregation who want to interact with any activity and with each other. And to help them to get all information about the church congregation activities and to support other people to search for God. Information that is available on this website is about the church congregation, pastor, news, upcoming activities, members, and servants of God. Check out the Mockup that I have created as part of the design process Mockup of the Church congregation.

Existing Features

There are six general pages (Home, events, location, pastor Contact us, About us, and the giving). In the pages (Home, events, location, pastor, about us) that present all information like(news, events, locations) about church congregation and their(priest and the servants) staff and goals. On the page(contact us) to contact them and the page(giving) its to donation to the church.

Features Left to Implement

  • Admin Dashboard: to be able to administrative website content by adding news, activity video images, etc.
  • Signin/Signup: to give all members the opportunity to post articles, pictures, or videos related to church activity
  • profile page: To display all information about all members should have a him/her.

Technologies Used

  • Codeinstitute: materials and homework and projector during the lesson.
  • HTML: by using HTML language to markup web pages in this project.
  • CSS: to perform style for the WepApp.
  • FontAwesome: to perform font and icon.
  • bootstrap 4: to perform responsive for the WepApp.
  • JavaScript and jQuery to perform:
    1. The active class for the navbar links.
    2. Data-Countdown for events.
    3. Sticky-Header.
    4. Mobile Navigation(navbar responsive for the mobile).
    5. Back to top: When you are at the bottom of a page, there is a button that will take you to the top of the page.
    6. Send Email.
    7. Google map.
    8. Twitter
  • Websites like: (Stackoverflow, css-tricks, w3schools, betalamedswish, github, youtube).
  • API:
    • EmailJS: to send email.
    • Google: to get the address location on the map.
    • Twitter: to get lasts twitter.
    • Swish: payment method only works in Sweden.

Testing

I have tested the web page with my mentor. Initially, I got some feedback and I made a little changes

  • Make code more formatted.
  • Reduce the comments.

I have tested the web page on different browsers and screen sizes and its works. My Contact form did not work really well at first, so when submitting a form page could not refresh, but then after many search I found solution. It works and refresh well and shows feedback message to users. Have tested payment system it works well and you can donate, which I have mentioned only in Sweden works. Google map API It was a challenge to make two maps, two different addresses in the same page but thanks to and Google I fixed it.

Deployment

I have chosen to deployed my project in github pages. Why GitHub Pages? GitHub Pages offers a lot of features and flexibility, all for free. Some of the benefits include:

  • Easy setup.
  • Good cooperation and communication using Git and GitHub.
  • Free hosting with >95% uptime.
  • Live updating with normal GitHub workflow.

How To Deployment On GitHub Pages ?

In GitHub, navigate to my username.github.io repository and click Settings. Within Settings, navigate to the Source section within the Github Pages section. From the dropdown menu, select master branch. Now, all of may repositories can be found at http://username.github.io/repository-name.

church-congregation's People

Contributors

ninos77 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.